/* Encabezado, barras de scroll y pines */
/* ===== Encabezado ===== */
header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hb{display:flex;gap:6px;flex:none}
header h1{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;flex:none;border-radius:9px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hb button svg{display:block;margin:auto}
.hb button{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer;font:inherit;font-size:1rem}
.hb button:hover{background:rgba(255,255,255,.3)}
/* ===== Barras de desplazamiento y panel con scroll ===== */
.tools{flex:0 1 auto;max-height:58%;overflow-y:auto}
#lista{min-height:0}
aside *{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
aside *::-webkit-scrollbar{width:8px}
aside *::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
/* ===== Pines más claros ===== */
.marca{width:42px;height:42px}
.pin{width:42px;height:42px;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.pin span{font-size:21px}
.pin.visto{opacity:.6;filter:saturate(.55)}
.badge{right:-16px;top:-11px;font-size:12px;padding:3px 7px;border:2px solid var(--c);color:#26211d}
.est{position:absolute;left:-9px;top:-9px;font-size:15px;line-height:1;background:#fff;border-radius:50%;padding:1px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.btn.on{background:var(--head);color:#fff;border-color:var(--head)}
.acc{display:flex;gap:5px;flex-wrap:wrap}
.acc .btn{padding:6px 9px;font-size:.8rem}