/* Painel com o mês selecionado e o botão Voltar a hoje. */
.timeline-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:32px;padding:18px 20px;background:var(--papel);border-radius:6px}
.timeline-controls label{font-size:.88rem;font-weight:600}.timeline-controls output{font-weight:700;color:var(--tinta);min-width:150px}.timeline-controls button{margin-left:auto}.timeline-controls button:disabled{opacity:.5;cursor:default}
/* Instruções de utilização e explicação do estado do calendário. */
.timeline-hint{font-size:.85rem;color:var(--ardosia);margin-top:10px}.timeline-status{font-size:.85rem;color:var(--ardosia);margin-top:12px}
/* Área interativa. pan-y permite continuar a deslizar a página na vertical. */
.gantt{margin-top:22px}.gantt .track{cursor:ew-resize;touch-action:pan-y;user-select:none}.gantt .g-head{height:76px}.gantt .g-head .track::after{top:24px}.gantt .ano{bottom:0!important}.gantt .hoje-lab{pointer-events:none}
/* Input range sobre o cronograma. As percentagens alinham o marcador
   com o centro dos 36 meses; 9px corresponde a metade da sua largura. */
#project-month{position:absolute;left:calc(1.388889% - 9px);top:21px;width:calc(97.222222% + 18px);height:24px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;z-index:8;touch-action:pan-y}
/* Aspeto da linha e do marcador em Chrome, Edge e Safari. */
#project-month::-webkit-slider-runnable-track{height:2px;background:var(--linha)}
#project-month::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:24px;margin-top:-11px;border:2px solid var(--tinta);border-radius:5px;background:var(--ambar);box-shadow:0 0 0 3px #fff}
/* Regras equivalentes para o Firefox. */
#project-month::-moz-range-track{height:2px;background:var(--linha)}
#project-month::-moz-range-thumb{width:14px;height:20px;border:2px solid var(--tinta);border-radius:5px;background:var(--ambar);box-shadow:0 0 0 3px #fff}
/* Atualização imediata das barras durante o arrasto, sem animações atrasadas. */
.gantt .seg{pointer-events:none;transition:none!important;transform:none!important}
/* Ajustes do painel e das linhas para ecrãs pequenos. */
@media(max-width:700px){.gantt .g-head{height:76px}.timeline-controls{padding:16px}.timeline-controls button{margin-left:0}.gantt .g-row .track{min-height:44px}}