* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; }

:root {
  --tr: 200; --tg: 200; --tb: 200;
  --ar: 255; --ag: 200; --ab: 100;
}

#lienzo {
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: calc(100% - 90px);
  height: 100%;
  cursor: grab;
}
#lienzo:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════
   MUNDO — contenedor de bloques (coordenadas mundo)
   ═══════════════════════════════════════════════════ */
#mundo {
  position: fixed;
  top: 0; left: 0;
  width: calc(100% - 90px);
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   BLOQUES
   ═══════════════════════════════════════════════════ */
.bloque {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  border-radius: 0;
  background: transparent;
  border: 1.5px solid rgba(var(--tr), var(--tg), var(--tb), .3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bloque > * { pointer-events: none; }
.bloque .bloque-contenido,
.bloque .chip,
.bloque .chip-hora,
.bloque .tag-item,
.bloque button,
.bloque audio,
.bloque video,
.bloque a,
.bloque select,
.bloque input,
.bloque textarea,
.bloque .tg-scroll,
.bloque .tg-msg,
.bloque .mapa-wrap,
.bloque .mapa-ctrl,
.bloque .mapa-ctrl-btn,
.bloque .leaflet-container,
.bloque .leaflet-control,
.bloque .leaflet-popup,
.bloque .leaflet-pane,
.bloque .leaflet-top,
.bloque .leaflet-bottom { pointer-events: auto; }
.bloque-titulo {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--tr), var(--tg), var(--tb));
  padding: .5rem .65rem .25rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(var(--tr), var(--tg), var(--tb), .12);
}
.bloque-contenido {
  padding: .2rem .5rem .5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: 0;
  overflow-y: auto;
  color: rgb(var(--tr), var(--tg), var(--tb));
}

.bloque-selector .bloque-contenido {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bloque-selector .bloque-contenido::-webkit-scrollbar {
  display: none;
}
/* bloque de medios */
.bloque-media {
  justify-content: center;
  align-items: center;
}
.bloque-media .bloque-contenido {
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
/* bloque Mapa: el mapa ocupa TODO el cuadro (sin padding ni centrado) */
.bloque-mapa {
  justify-content: stretch;
  align-items: stretch;
}
.bloque-mapa .bloque-contenido {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* ═══════════════════════════════════════════════════
   CHIP reutilizable — sin fondo, solo texto
   ═══════════════════════════════════════════════════ */
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .15rem .4rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 350;
  letter-spacing: .04em;
  color: rgba(var(--tr), var(--tg), var(--tb), .55);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, padding .2s ease;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip:hover {
  color: rgb(var(--tr), var(--tg), var(--tb));
  padding-left: .65rem;
  padding-right: .15rem;
}
.chip.activo {
  color: rgb(var(--ar), var(--ag), var(--ab));
  font-weight: 450;
  border-color: rgba(var(--ar), var(--ag), var(--ab), .85);
  box-shadow: 0 0 0 1px rgba(var(--ar), var(--ag), var(--ab), .3),
              0 0 6px rgba(var(--ar), var(--ag), var(--ab), .25);
}

.chip-bola {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
}

/* chip-hora */
.chip-hora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .2rem .5rem;
  border: 1px solid transparent;
  background: rgb(var(--chip-bg));
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  font-weight: 400;
  color: rgba(var(--chip-txt), .85);
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
  width: auto;
  line-height: 1.3;
  text-align: center;
  opacity: .7;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-hora:hover {
  opacity: 1;
}
.chip-hora.activo {
  background: rgb(var(--ar), var(--ag), var(--ab));
  color: rgb(var(--tr), var(--tg), var(--tb));
  font-weight: 500;
  opacity: 1;
  border-color: rgba(var(--tr), var(--tg), var(--tb), .85);
  box-shadow: 0 0 0 1px rgba(var(--tr), var(--tg), var(--tb), .35),
              0 0 6px rgba(var(--tr), var(--tg), var(--tb), .3);
}

/* ═══════════════════════════════════════════════════
   INFO — estado de selección
   ═══════════════════════════════════════════════════ */
.info-filtro {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .05em;
  color: rgba(var(--tr), var(--tg), var(--tb), .4);
  padding: 0 .2rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Botón "desmarcar todos" de los cuadros de chips */
.chip-limpiar {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(var(--tr), var(--tg), var(--tb), .25);
  color: rgba(var(--tr), var(--tg), var(--tb), .5);
  font-size: .55rem;
  line-height: 1;
  padding: .15rem .3rem;
  cursor: pointer;
  border-radius: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.chip-limpiar:hover {
  color: rgba(var(--tr), var(--tg), var(--tb), .9);
  border-color: rgba(var(--tr), var(--tg), var(--tb), .6);
}

/* Selector por municipio del bloque Mapa (overlay) */
.mapa-ctrl {
  z-index: 1000;
}
.mapa-ctrl-btn {
  pointer-events: auto;
  background: rgba(20, 20, 25, .55);
  border: 1px solid rgba(var(--tr), var(--tg), var(--tb), .35);
  color: rgba(var(--tr), var(--tg), var(--tb), .85);
  font-size: .55rem;
  line-height: 1;
  padding: .12rem .35rem;
  cursor: pointer;
  border-radius: 2px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(1px);
}
.mapa-ctrl-btn:hover {
  background: rgba(20, 20, 25, .8);
  color: rgb(var(--tr), var(--tg), var(--tb));
  border-color: rgba(var(--tr), var(--tg), var(--tb), .6);
}
.mapa-ctrl-btn.activo {
  color: rgb(var(--ar), var(--ag), var(--ab));
  border-color: rgba(var(--ar), var(--ag), var(--ab), .85);
  font-weight: 500;
  background: rgba(20, 20, 25, .7);
}

/* ═══════════════════════════════════════════════════
   Tags cloud
   ═══════════════════════════════════════════════════ */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .12rem .2rem;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
  padding: .15rem;
  width: 100%;
}
.tag-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(var(--tr), var(--tg), var(--tb), .4);
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.tag-item:hover { color: rgb(var(--tr), var(--tg), var(--tb)); }
.tag-item.activo {
  color: rgb(var(--ar), var(--ag), var(--ab));
  font-weight: 500;
  border-color: rgba(var(--ar), var(--ag), var(--ab), .85);
  box-shadow: 0 0 0 1px rgba(var(--ar), var(--ag), var(--ab), .3),
              0 0 6px rgba(var(--ar), var(--ag), var(--ab), .25);
}

/* ═══════════════════════════════════════════════════
   SIDEBAR — barra lateral derecha
   Usa colores de la paleta (el fondo del canvas es el color horario)
   ═══════════════════════════════════════════════════ */
#sidebar {
  position: fixed;
  right: 0; top: 0;
  width: 90px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding-top: .75rem;
  z-index: 200;
  pointer-events: none;
}
#sidebar > * { pointer-events: auto; }
.sidebar-sep {
  width: 20px;
  height: 1px;
  background: rgba(var(--tr), var(--tg), var(--tb), .1);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   BOTÓN FLUIR
   ═══════════════════════════════════════════════════ */
.btn-fluir {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: .35rem .65rem;
  border-radius: 0;
  border: 1px solid rgba(var(--tr), var(--tg), var(--tb), .2);
  background: transparent;
  color: rgba(var(--tr), var(--tg), var(--tb), .55);
  cursor: pointer;
  transition: all .3s ease;
  width: 100%;
}
.btn-fluir:hover {
  border-color: rgba(var(--tr), var(--tg), var(--tb), .4);
  color: rgb(var(--tr), var(--tg), var(--tb));
}
.btn-fluir.activo {
  border-color: rgba(var(--ar), var(--ag), var(--ab), .5);
  color: rgb(var(--ar), var(--ag), var(--ab));
  animation: pulse-fluir 2s ease-in-out infinite;
}
@keyframes pulse-fluir {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--ar), var(--ag), var(--ab), .1); opacity: .6; }
  50%      { box-shadow: 0 0 24px rgba(var(--ar), var(--ag), var(--ab), .4); opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   BOTÓN SONIDO
   ═══════════════════════════════════════════════════ */
.btn-sonido {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  border-radius: 0;
  border: 1px solid rgba(var(--tr), var(--tg), var(--tb), .2);
  background: transparent;
  color: rgba(var(--tr), var(--tg), var(--tb), .55);
  cursor: pointer;
  transition: all .3s ease;
  width: 100%;
}
.btn-sonido:hover {
  border-color: rgba(var(--tr), var(--tg), var(--tb), .4);
  color: rgb(var(--tr), var(--tg), var(--tb));
}
.btn-sonido.activo {
  border-color: rgba(var(--ar), var(--ag), var(--ab), .5);
  color: rgb(var(--ar), var(--ag), var(--ab));
}

/* ═══════════════════════════════════════════════════
   ZOOM
   ═══════════════════════════════════════════════════ */
#zoom-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.zoom-btn {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 1px solid rgba(var(--tr), var(--tg), var(--tb), .15);
  font-size: .85rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s, border-color .3s;
  background: transparent;
  color: rgba(var(--tr), var(--tg), var(--tb), .5);
}
.zoom-btn:hover {
  border-color: rgba(var(--tr), var(--tg), var(--tb), .4);
  color: rgb(var(--tr), var(--tg), var(--tb));
}
#zoom-ctrl input[type=range] {
  width: 4px;
  height: 100px;
  writing-mode: vertical-lr;
  direction: rtl;
  cursor: pointer;
  outline: none;
  border: none;
  accent-color: rgb(var(--ar), var(--ag), var(--ab));
  margin: 0;
  padding: 0;
}
.zoom-label {
  font-size: .55rem;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .5;
  margin-top: .05rem;
  transition: color .3s;
  color: rgba(var(--tr), var(--tg), var(--tb), .6);
}

/* ═══════════════════════════════════════════════════
   SIDEBAR — resumen DB
   ═══════════════════════════════════════════════════ */
#sidebar-resumen {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem 0;
  font-size: .65rem;
  font-weight: 350;
  letter-spacing: .04em;
  color: rgba(var(--tr), var(--tg), var(--tb), .5);
  line-height: 1.3;
  text-align: center;
  width: 100%;
}
#sidebar-resumen .num {
  font-weight: 500;
  color: rgb(var(--ar), var(--ag), var(--ab));
}

/* ═══════════════════════════════════════════════════
   FADE — overlay de transición al presionar Fluir
   ═══════════════════════════════════════════════════ */
#fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

/* ═══════════════════════════════════════════════════
   VIDEOS 360° — reproductor embebido
   ═══════════════════════════════════════════════════ */
.visor-360-bloque { min-width:0; }
.visor-360-canvas { min-height:0; }
.visor-360-canvas canvas { display:block; width:100%; height:100%; touch-action:none; }
.visor-360-bar { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.visor-360-nav {
  background:transparent;
  color:inherit;
  border:1px solid rgba(var(--tr),var(--tg),var(--tb),.25);
  border-radius:3px;
  font-size:.6rem;
  padding:.05rem .35rem;
  cursor:pointer;
}
.visor-360-nav:hover { border-color:rgba(var(--ar),var(--ag),var(--ab),.8); }
.visor-360-info {
  flex:1;
  min-width:0;
  font-size:.5rem;
  opacity:.8;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.visor-360-hint { flex-shrink:0; font-size:.42rem; opacity:.4; text-align:center; }