.area-marcada {
    border: 3px solid var(--cor-laranja);
}

.camada-de-print {
    z-index: 2000;
    cursor: url("/img/svg/cruz-da-tesoura.svg") 16 16, crosshair;
    touch-action: none;
    user-select: none;
    background-color: var(--cor-preta-opacidade);

    &.preparando {
        cursor: wait;
    }
}

.aviso-de-print {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Sem isto, o left: 50% limita o aviso à metade da tela, e no celular ele quebra em várias linhas. */
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
    background-color: var(--cor-vermelho);
    color: var(--cor-branca);

    @media (pointer: coarse) {
        .cancelar-com-esc {
            display: none;
        }
    }
}

.dica-do-menu {
    font-size: 0.875em;
    font-weight: normal;
}

.botao-do-menu-na-camada {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--cor-branca);
    background-color: var(--cor-roxa);
    border: 2px solid var(--cor-vermelho);
    border-radius: 0.5rem;
}

.campos-do-destino {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.busca-do-work-item {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.cartao-do-work-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid var(--cor-cinza-medio);
    border-radius: 0.375rem;
}

.cartao-do-work-item .tabela-status {
    margin: 0;
    padding-inline: 0.5rem;
}

.selos-do-work-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.titulo-do-work-item {
    font-weight: bold;
}