/* ═══ 5.2 · a · Hoje (pedido da Joana, 22/10): «coerência de tamanho dos cartões, tudo alinhado entre Nova Marcação Manual e o cartão
   de baixo, o sítio onde começam»; «aquela ligação a verde entre cartões tem de estar um pouco mais bonita» ═══ */
@media (min-width:701px){
:root{--hjG:36px;--hjR:430px}
/* as duas linhas usam as mesmas colunas: a Nova Marcação por Voz acaba onde acaba a próxima marcação,
   a Nova Marcação Manual começa e acaba onde começa e acaba o cartão do estado e das ações */
.hj50top.n2{grid-template-columns:minmax(0,1fr) auto var(--hjG) var(--hjR);column-gap:0}
.hj50top.n2>.hj50voz{grid-column:1;grid-row:1}
.hj50top.n2>.hj50sim{grid-column:2;grid-row:1;margin-left:10px}
.hj50top.n2>.hj50b{grid-column:4;grid-row:1}
.hj50m{grid-template-columns:minmax(0,1fr) var(--hjG) var(--hjR)}
.hj50m>.hj50c,.hj50m>.cx47s{position:relative;z-index:1}
/* a ligação: um fio verde petróleo com um botão redondo ao meio (seta para as ações) */
.hj50lk{position:relative;z-index:auto}
.hj50lk::before,.hj50m .hj50lk::before,.hj50e .hj50lk::before{left:-4px;right:-4px;top:41px;height:2px;border-radius:2px;background:linear-gradient(90deg,#2b7c81,#3c9ba0 50%,#2b7c81)}
.hj50lk::after,.hj50m .hj50lk::after,.hj50e .hj50lk::after{left:50%;right:auto;top:31px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(160deg,#3a959a,#1f6b70);
 box-shadow:0 0 0 3px var(--bg),0 3px 8px rgba(31,107,112,.32)}
/* na janela da marcação o fundo é branco */
.modal .hj50lk::after{box-shadow:0 0 0 3px #fff,0 3px 8px rgba(31,107,112,.32)}
.hj50e .hj50lk::before{top:30px}.hj50e .hj50lk::after{top:20px}
}
@media (min-width:701px) and (max-width:1460px){:root{--hjG:30px;--hjR:400px}}