/* imap — visor 3D de Sarria (prototipo) · marca 2026
   Verde #80bc00 · Navy #0a111c · Azul #006189 · Sora/Inter */

:root{
  --verde:#80bc00; --navy:#0a111c; --azul:#006189; --gris:#42535f;
}
html,body{margin:0;padding:0;height:100%;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;background:var(--navy)}
#cesiumContainer{position:absolute;inset:0}

/* --- tarjeta de control (arriba-izquierda) --- */
.imap-card{
  position:absolute;top:16px;left:16px;z-index:10;max-width:280px;
  background:rgba(10,17,28,.92);color:#eef4f8;border-radius:16px;
  padding:18px 20px;box-shadow:0 14px 36px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.imap-kicker{font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--verde);margin:0 0 8px}
.imap-title{font:800 19px/1.2 'Sora',sans-serif;margin:0 0 6px;color:#fff}
.imap-sub{font:400 12.5px/1.5 'Inter',sans-serif;color:#a9bdc9;margin:0 0 14px}
.imap-h{font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#7f95a5;margin:14px 0 8px}
.imap-vistas{display:flex;flex-wrap:wrap;gap:6px}
.imap-vistas button{
  font:600 12.5px/1 'Inter',sans-serif;color:var(--navy);background:var(--verde);
  border:0;border-radius:999px;padding:9px 13px;cursor:pointer;
  transition:background-color .25s,box-shadow .25s}
.imap-vistas button:hover{background:#8fce0f}
.imap-toggle{display:flex;align-items:center;gap:8px;margin-top:4px;
  font:500 13px/1.4 'Inter',sans-serif;color:#dfe9ef;cursor:pointer}
.imap-toggle input{accent-color:var(--verde);width:15px;height:15px}
.imap-nota{margin:12px 0 0;font:400 11px/1.5 'Inter',sans-serif;color:#7f95a5}

/* --- créditos (abajo-izquierda) --- */
.imap-credit{position:absolute;left:16px;bottom:10px;z-index:10;
  font:400 10.5px/1.5 'Inter',sans-serif;color:rgba(255,255,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.imap-credit a{color:inherit}

/* enlace de vuelta a la web principal (junto a los créditos) */
.imap-home{position:absolute;left:16px;bottom:32px;z-index:10;margin:0;
  font:600 10.5px/1.5 'Inter',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.imap-home a{color:rgba(255,255,255,.85);text-decoration:none}
.imap-home a:hover,.imap-home a:focus{color:#fff;text-decoration:underline}

/* etiquetas de POI legibles sobre ortofoto */
.poi-label{font:600 12.5px/1.2 'Inter',sans-serif;color:var(--navy)}
.imap-loading{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:var(--navy);color:#a9bdc9;font:500 14px/1.5 'Inter',sans-serif;
  transition:opacity .6s}
.imap-loading.out{opacity:0;pointer-events:none}
.imap-loading strong{color:#fff;font:800 22px/1.3 'Sora',sans-serif;display:block;
  margin-bottom:6px;text-align:center}

@media (max-width:600px){
  .imap-card{max-width:230px;padding:14px 16px;top:10px;left:10px}
  .imap-title{font-size:16px}
}

.imap-barra{display:block;width:200px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.14);overflow:hidden;margin:10px auto 0}
.imap-barra span{display:block;height:100%;width:0;border-radius:999px;
  background:var(--verde);transition:width .3s}

/* itinerario a pie */
.imap-tour{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:10;
  display:none;background:rgba(10,17,28,.92);border-radius:999px;padding:8px 10px;
  box-shadow:0 12px 30px rgba(0,0,0,.4)}
.imap-tour.on{display:block}
.imap-tour-btns{display:flex;align-items:center;gap:8px}
.imap-tour-btns button{border:0;border-radius:999px;background:#f2f5f7;color:#0a111c;
  font:700 14px/1 'Inter',sans-serif;width:30px;height:30px;cursor:pointer}
.imap-tour-btns button:hover{background:#e2e8ec}
.imap-tour-btns .imap-auto{width:auto;padding:0 14px;background:#80bc00;color:#0a111c;
  font:600 12.5px/1 'Inter',sans-serif}
.imap-tour-btns .imap-auto:hover{background:#8fce0f}
.imap-tour-btns span{font:600 12.5px/1 'Inter',sans-serif;color:#dfe9ef;padding:0 4px}

/* leyenda de categorías */
.imap-leyenda{display:grid;gap:4px}
.imap-leyenda .imap-toggle i{display:inline-block;width:10px;height:10px;border-radius:50%}

/* readout de cursor */
.imap-readout{position:absolute;right:14px;bottom:12px;z-index:10;
  font:600 11.5px/1 'Inter',sans-serif;color:#fff;background:rgba(10,17,28,.75);
  border-radius:999px;padding:6px 12px}

/* ficha de POI en el infoBox de Cesium */
.cesium-infoBox{background:rgba(10,17,28,.94)!important;border-radius:12px!important;
  border:0!important;box-shadow:0 12px 30px rgba(0,0,0,.4)!important}
.cesium-infoBox-title{background:transparent!important}
.imap-ficha{font:400 13px/1.55 'Inter',sans-serif;color:#dfe9ef;padding:4px 2px}
.imap-ficha .imap-chip{display:inline-block;background:#80bc00;color:#0a111c;
  font:700 10px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:5px 10px;margin-bottom:8px}
.imap-ficha a{color:#8fce0f}
@media (max-width:600px){
  .imap-tour{bottom:12px;width:calc(100% - 20px)}
  /* capa inferior limpia en móvil: nada solapado con la barra del itinerario */
  .imap-credit,.imap-home,.imap-readout{display:none}
  .cesium-viewer-bottom{bottom:58px !important;left:6px !important;right:auto !important}
}


/* ayer y hoy: comparador de años */
.imap-anios{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.imap-anios button{border:0;border-radius:999px;padding:6px 10px;cursor:pointer;
  font:600 11.5px/1 'Inter',sans-serif;background:rgba(255,255,255,.12);color:#dfe9ef}
.imap-anios button.on{background:#80bc00;color:#0a111c}
.imap-swipe{position:absolute;left:50%;transform:translateX(-50%);top:14px;z-index:10;
  display:none;align-items:center;gap:10px;background:rgba(10,17,28,.92);
  border-radius:999px;padding:9px 16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.imap-swipe.on{display:flex}
.imap-swipe span{font:700 11px/1 'Inter',sans-serif;letter-spacing:.16em;color:#dfe9ef}
.imap-swipe input[type=range]{width:220px;accent-color:#80bc00}
.imap-linea{position:absolute;top:0;bottom:0;width:3px;background:#80bc00;z-index:5;
  box-shadow:0 0 10px rgba(128,188,0,.8);pointer-events:none}

/* botón plegar/desplegar el panel de info (clave en móvil) */
#imap-ficha-toggle{position:absolute;top:14px;left:14px;z-index:11;width:38px;height:38px;
  border:0;border-radius:999px;background:rgba(10,17,28,.92);color:#fff;cursor:pointer;
  font:700 15px/1 'Inter',sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:background-color .25s}
#imap-ficha-toggle:hover{background:#80bc00;color:#0a111c}
.imap-card.oculto{display:none}
/* con el panel plegado, el botón acompaña; desplegado, se aparta a la derecha del panel */
body.card-visible #imap-ficha-toggle{left:calc(14px + 280px + 10px)}
@media (max-width:600px){
  body.card-visible #imap-ficha-toggle{left:auto;right:14px;top:14px}
  .imap-card{max-width:calc(100vw - 28px);max-height:62vh;overflow-y:auto}
}


/* rótulo de año activo (ayer y hoy a pantalla completa) */
.imap-cartel{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:11;
  border:0;border-radius:999px;background:rgba(10,17,28,.92);color:#fff;cursor:pointer;
  font:600 13px/1 'Inter',sans-serif;padding:10px 18px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.imap-cartel b{color:#80bc00}
.imap-cartel:hover{background:#80bc00;color:#0a111c}
.imap-cartel:hover b{color:#0a111c}

/* comparador 1956 ↔ HOY: cortinilla deslizable */
#imap-divide{position:absolute;top:0;bottom:0;width:3px;background:#80bc00;z-index:9;
  box-shadow:0 0 12px rgba(128,188,0,.9);cursor:ew-resize;touch-action:none}
#imap-divide[hidden]{display:none}
#imap-divide::after{content:'⇔';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:#80bc00;color:#0a111c;font:700 12px/22px 'Inter',sans-serif;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
#imap-perfil{display:block;border-radius:8px}

/* selector de idioma del visor: activo según html[lang] real */
.imap-lang a{font:700 10px/1 'Inter',sans-serif;letter-spacing:.06em;color:#7f95a5;
  text-decoration:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 7px;margin-left:4px}
.imap-lang a.on{background:#80bc00;color:#0a111c;border-color:#80bc00}
html:not([lang^="es"]) .imap-lang a.on{background:transparent;color:#7f95a5;border-color:rgba(255,255,255,.25)}
html[lang^="gl"] .imap-lang a[data-lang="gl"],
html[lang^="en"] .imap-lang a[data-lang="en"]{background:#80bc00;color:#0a111c;border-color:#80bc00}

/* el atributo hidden manda siempre: sin esta regla, cualquier display del
   propio elemento (p.ej. #imap-perfil{display:block}) pisa el hidden del UA
   y los paneles "ocultos" siguen pintados */
[hidden]{display:none!important}