/* Menu de ferramentas (.side): barra horizontal no ecrã grande;
   barra lateral de ícones em tablet; gaveta em telemóvel (ver responsive.css). */
.bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px}
.tool{border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 10px;display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;min-width:58px;color:var(--ink)}
.tool svg{width:20px;height:20px;flex:none}
.tool:hover{background:var(--surface2)}
.tool[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.tool[disabled]{opacity:.4;cursor:default}
.zoom{display:flex;align-items:center;gap:4px;margin-left:auto}
.zoom .val{font-family:var(--ff-mono);font-size:12.5px;min-width:46px;text-align:center}
.side-title{display:none}
.scrim{display:none}
.selbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600}
.selbar input[type=range]{width:140px}
.selbar input[type=number]{width:58px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 6px;text-align:center;font-family:var(--ff-mono)}

/* Faixa de dica / seleção com altura fixa: o documento não "salta" ao selecionar. */
.hint,.selbar{height:48px;min-height:48px;flex:none;box-sizing:border-box}
.hint{overflow:hidden}
.selbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
.selbar::-webkit-scrollbar{display:none}
.selbar>*{flex:none}

/* Setas que indicam que a barra de seleção desliza na horizontal */
.selwrap{position:relative;flex:none}
.selarrow{position:absolute;top:1px;bottom:1px;width:30px;border:0;padding:0;font-size:24px;font-weight:700;line-height:1;color:var(--accent);display:grid;place-items:center}
.selarrow.left{left:1px;border-radius:9px 0 0 9px;background:linear-gradient(to right,var(--accent-soft) 55%,transparent)}
.selarrow.right{right:1px;border-radius:0 9px 9px 0;background:linear-gradient(to left,var(--accent-soft) 55%,transparent)}

/* Setas bem visíveis e a pulsar */
.selarrow{width:36px;font-size:30px;color:var(--accent-ink);background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:selpulse 1.8s ease-in-out infinite}
.selarrow.left{background:var(--accent);left:0;top:0;bottom:0;border-radius:10px 0 0 10px;animation-name:selpulse,selnudgel}
.selarrow.right{background:var(--accent);right:0;top:0;bottom:0;border-radius:0 10px 10px 0;animation-name:selpulse,selnudger}
@keyframes selpulse{0%{box-shadow:0 0 0 0 var(--accent);opacity:1}60%{box-shadow:0 0 0 9px transparent;opacity:.75}100%{box-shadow:0 0 0 0 transparent;opacity:1}}
@keyframes selnudger{0%,100%{padding-left:0}50%{padding-left:6px}}
@keyframes selnudgel{0%,100%{padding-right:0}50%{padding-right:6px}}
@media (prefers-reduced-motion:reduce){.selarrow{animation:none}}