/* Ourense · Atlas ilustrado — interfaz de atlas ilustrado
   Paleta tomada de las teselas: papel crema de las fachadas, tejados terracota,
   sombras pizarra, hierba y el azul del Miño. Tarjetas de papel con cantos suaves,
   tinta oscura y sombras cálidas, como un mapa de guía de viaje. */

:root{
  --ink:#2a2b45;--ink-soft:#55587a;--muted:#7d7f9a;
  --paper:#fffaf0;--paper-2:#f6ecd9;--paper-3:#ead9b8;--line:rgba(42,43,69,.12);
  --roof:#e8552f;--roof-dark:#c0401f;--roof-soft:#fde3d6;
  --grass:#4fa83a;--river:#2f63b5;--sky:#bfe0f6;
  --night:#1b2038;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Nunito',ui-rounded,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(42,43,69,.06),0 18px 34px -16px rgba(12,14,32,.55),0 4px 10px -4px rgba(12,14,32,.25);
  --radius:18px;
  font-family:var(--ui);color:var(--ink);background:var(--night);-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:var(--night)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.35;cursor:default}
[hidden]{display:none!important}
svg use{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2.5px solid var(--roof);outline-offset:3px}
canvas:focus-visible{outline:none}

#atlas{height:100dvh;width:100vw;position:relative;overflow:hidden}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map.dragging{cursor:grabbing}
#map.editing{cursor:crosshair}

/* Superficies de papel */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.chip{background:rgba(255,250,240,.92);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 24px -14px rgba(12,14,32,.6);backdrop-filter:blur(6px)}

/* Marca */
.brand{position:absolute;top:22px;left:22px;padding:15px 26px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:4;border-radius:22px}
.brand::after{content:"";position:absolute;inset:5px;border:1px dashed var(--paper-3);border-radius:17px;pointer-events:none}
.brand h1{font:600 30px/1 var(--display);font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.6px;margin:0;color:var(--ink);white-space:nowrap}
.brand h1 em{font-style:italic;font-weight:500;color:var(--roof)}


/* Aviso de traballo en curso, con latexo */
.wip{display:flex;align-items:center;gap:7px;margin:0;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.wip-dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--roof);opacity:.85;flex:none}
.wip-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--roof);animation:wip-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes wip-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}

/* Botones de icono */
.top-actions{position:absolute;right:22px;top:28px;display:flex;gap:10px;z-index:4}
.icon-button{width:46px;height:46px;display:grid;place-items:center;color:var(--ink);border-radius:15px;transition:transform .15s,background .15s}
.icon-button svg{width:22px;height:22px}
.icon-button:hover:not(:disabled){background:#fff;color:var(--roof);transform:translateY(-1px)}
.icon-button:active:not(:disabled){transform:translateY(1px)}

/* Navegación */
.navigation{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;align-items:center;flex-direction:column;gap:12px;z-index:3}
.compass{width:52px;padding:6px 0 7px;display:flex;align-items:center;flex-direction:column;gap:1px;border-radius:26px}
.compass svg{width:40px;height:40px}
.compass small{font-size:10px;font-weight:700;color:var(--muted)}
.zoom{width:46px;display:flex;flex-direction:column;border-radius:15px;overflow:hidden}
.zoom button{height:46px;display:grid;place-items:center;transition:background .15s,color .15s}
.zoom button svg{width:20px;height:20px}
.zoom button:hover:not(:disabled){background:#fff;color:var(--roof)}
.zoom span{height:1px;margin:0 10px;background:var(--line)}

/* Botón de límites y niebla, en la columna de controles */
#open-settings[aria-expanded=true]{background:var(--ink);color:var(--paper);transform:none}

/* Marcador */
.map-stats{position:absolute;right:24px;bottom:40px;display:flex;font-size:12px;font-weight:700;color:var(--ink-soft);pointer-events:none;z-index:2;padding:7px 4px}
.map-stats span{padding:0 10px}
#zoom-level{color:var(--roof)}

/* Créditos */
.credits{position:absolute;right:14px;bottom:12px;font-size:11px;font-weight:600;color:rgba(255,250,240,.8);z-index:3;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.credits button{font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:0 0 0 6px;color:#fff}
.credits button:hover{color:var(--roof-soft)}
.cloud-theme .credits{color:var(--ink-soft);text-shadow:none}.cloud-theme .credits button{color:var(--roof-dark)}

/* Paneles */
.settings,.help-panel{z-index:5;position:absolute;padding:24px;border-radius:22px}
.settings{top:50%;right:86px;transform:translateY(-50%);width:340px;max-height:calc(100dvh - 200px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--paper-3) transparent}
.help-panel{top:90px;right:22px;width:330px}
.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eyebrow{font:800 10.5px/1 var(--ui);letter-spacing:1.8px;text-transform:uppercase;color:var(--roof);margin:0 0 8px}
h2{font:600 24px/1.1 var(--display);font-variation-settings:'SOFT' 100,'opsz' 48;letter-spacing:-.4px;margin:0;color:var(--ink)}
.close{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--ink-soft);background:var(--paper-2);border-radius:50%;transition:background .15s,color .15s}
.close svg{width:16px;height:16px}
.close:hover{background:var(--roof);color:#fff}
.description,.help-panel p,dialog p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:500}
.description{margin:12px 0 16px}
.help-panel p{margin:12px 0}
.help-panel strong{color:var(--ink);font-weight:800}
.keys{list-style:none;margin:16px 0;padding:14px;background:var(--paper-2);border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.keys li{display:flex;align-items:center;gap:5px}.keys li.wide{grid-column:1/-1}.keys kbd:last-of-type{margin-right:4px}
kbd{font:800 11px/1 var(--ui);min-width:24px;height:24px;display:inline-grid;place-items:center;padding:0 6px;background:var(--paper);color:var(--ink);border:1px solid var(--paper-3);border-bottom-width:3px;border-radius:7px}
.hint{font-size:12.5px!important;line-height:1.55;color:var(--muted)!important}

/* Interruptor */
.row-label{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;padding:12px 0 16px;border-bottom:1px dashed var(--paper-3)}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:26px;margin:0;border-radius:999px;background:var(--paper-3);position:relative;cursor:pointer;transition:background .2s}
input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(42,43,69,.35);transition:transform .2s}
input[type=checkbox]:checked{background:var(--grass)}
input[type=checkbox]:checked::before{transform:translateX(18px)}

/* Selector segmentado */
fieldset{padding:0;border:0;margin:16px 0 4px}
legend{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 10px;padding:0}
.segmented{display:flex;gap:4px;padding:4px;background:var(--paper-2);border-radius:14px}
.segmented button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;padding:9px 8px;border-radius:11px;color:var(--ink-soft)}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 2px 6px -2px rgba(42,43,69,.35)}
.swatch{width:14px;height:14px;flex:none;border-radius:50%;box-shadow:0 0 0 1.5px rgba(42,43,69,.25)}
.swatch-dark{background:radial-gradient(circle at 35% 35%,#3a4170,#141830)}
.swatch-cloud{background:radial-gradient(circle at 35% 35%,#fff,#d9dbe8)}

/* Deslizadores */
.range-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin:18px 0 8px}
.range-label output{color:var(--roof);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;margin:0 0 4px;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--paper-3)}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--paper-3)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--roof)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:4px solid var(--roof);box-shadow:0 2px 5px rgba(42,43,69,.35);transition:transform .15s}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid var(--roof);box-shadow:0 2px 5px rgba(42,43,69,.35)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}

/* Botones anchos */
.wide-button{width:100%;margin:20px 0 0;padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:800;background:var(--ink);color:var(--paper);border-radius:14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:background .15s,transform .15s}
.wide-button:hover{background:#3a3c5e;transform:translateY(-1px)}
.wide-button:active{transform:translateY(1px)}
#edit-boundary::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L15.5 5.5a2.1 2.1 0 0 1 3 3L8 19z'/%3E%3Cpath d='M13.5 7.5l3 3'/%3E%3C/svg%3E")}
#edit-boundary[aria-pressed=true]{background:var(--roof)}
#edit-boundary[aria-pressed=true]::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
#edit-hint{margin:12px 0 0;padding:10px 12px;background:var(--roof-soft);border-radius:12px;color:var(--roof-dark)!important}
.panel-bottom{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px dashed var(--paper-3)}
.text-button{font-size:13px;font-weight:700;color:var(--muted)}
.text-button:hover{color:var(--ink)}
.text-button.accent{color:var(--roof)}
.text-button.accent:hover{color:var(--roof-dark)}
.local-note{font-size:11.5px;font-weight:600;color:var(--muted);margin:14px 0 0}

/* Aviso de progreso */
#progress-note{position:absolute;top:122px;left:22px;width:290px;padding:12px 15px;font-size:12.5px;line-height:1.55;font-weight:600;color:var(--ink-soft);z-index:2;border-radius:14px}

/* Mensaje flotante */
#toast{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);padding:11px 20px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:700;border-radius:999px;white-space:nowrap;z-index:8;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);animation:rise .3s ease-out}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}

/* Diálogo */
dialog{color:var(--ink);width:min(520px,calc(100vw - 40px));padding:26px;border-radius:24px}
dialog::backdrop{background:rgba(20,22,45,.55);backdrop-filter:blur(5px)}
dialog a{font-size:13.5px;font-weight:800;color:var(--river);text-underline-offset:3px}
dialog img{width:100%;margin-top:4px;background:var(--night);min-height:20px;object-fit:contain;border-radius:12px}

/* Pantalla de carga */
#loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(ellipse at center,#2b3258 0%,#1b2038 60%,#12152a 100%)}
.loading-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 30px;font:600 17px/1.2 var(--display);font-variation-settings:'SOFT' 100;border-radius:22px}
.loader{width:56px;height:56px}
.loader .needle{transform-origin:24px 24px;animation:swing 2.4s ease-in-out infinite}
@keyframes swing{0%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}100%{transform:rotate(-40deg)}}

/* Capas */
.settings,.help-panel{z-index:5}.brand,.top-actions{z-index:4}.navigation{z-index:3}.map-stats{z-index:2}#toast{z-index:8}

@media(max-width:600px){
  .brand{top:14px;left:14px;padding:11px 18px 10px;border-radius:18px;gap:6px}
  .wip{font-size:9px}
  .brand::after{inset:4px;border-radius:14px}
  .brand h1{font-size:23px}
  .top-actions{right:14px;top:18px;gap:8px}
  .top-actions .icon-button{width:40px;height:40px;border-radius:13px}
  .navigation{right:14px;gap:10px}
  .compass{width:44px}.compass svg{width:34px;height:34px}
  .zoom,.navigation .icon-button{width:40px}
  .navigation .icon-button{height:40px;border-radius:13px}
  .zoom button{height:40px}
  .settings{right:66px;width:min(340px,calc(100vw - 82px));padding:20px;max-height:calc(100dvh - 190px)}
  .help-panel{right:14px;top:70px;width:min(330px,calc(100vw - 28px));padding:20px}
  .map-stats{right:14px;bottom:36px;font-size:11.5px}
  .credits{font-size:10px;right:10px;bottom:10px}
  .credits button{font-size:10px}
  #progress-note{top:124px;left:14px;width:min(260px,calc(100vw - 100px));font-size:11.5px}
  #toast{font-size:12.5px;max-width:90vw;white-space:normal;text-align:center;bottom:80px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}